<template>
  <div class="item-detail flex column">
    <div class="item-title">达人卡片</div>
    <div class="item-content">
      <Form :model="detailData" :label-width="80">
        <!-- <FormItem label="创建时间">
          <div class="input-wrapper">
            <Input style="width: 200px;"  v-model="createtime" readonly></Input>
          </div>
        </FormItem> -->
         <FormItem label="主标题">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.label_name_cn" placeholder="请输入主标题"></Input>
          </div>
        </FormItem>
        <FormItem label="副标题">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.label_info_summary" placeholder="请输入副标题"></Input>
          </div>
        </FormItem>
        <FormItem label="选择达人">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.json[0].talentId.author_name" @click.native="choseTalent"></Input>
          </div>
        </FormItem>
        <FormItem label="编辑文本">
    	  <div class="input-wrapper">
            <Input style="width: 200px;" tpye="textarea" v-model="detailData.json[0].poetry"></Input>
          </div>
        </FormItem>
        <FormItem label="落款文本">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.json[0].poetry_from"></Input>
          </div>
        </FormItem>
	   
  	    <FormItem label="跳转类型">
      		<div class="flex center input-wrapper">
            <Select v-model="detailData.json[0].skip_type" class="select-wrapper" @on-change="chageSel">
              <Option value="goods">商品</Option>
              <Option value="label">微页面</Option>
            </Select>
            <Input v-if="detailData.json[0].skip_type" style="width: 200px;" v-model="detailData.json[0].skip_url" @click.native="tapInput" placeholder="请输入商品ID或微页面ID"></Input>
          </div>
  	    </FormItem>

        <FormItem label="添加图片">
      		<div class="flex center">
            <div class="input-file-wrapper">
              <img :src="detailData.json[0].image_url" />
              <input :name="index" type="file" accept="image/*" @change='handleFileChange'></input>
            </div>
            <p style="margin-left: 40px;">建议尺寸560*660</p>
          </div>
  	    </FormItem>
	    
      </Form>
    </div>

    <!-- 商品选择器 -->
    <goodsSelect buyMode="-9" @confirm="commitGoodsFn" ref="goodsModal" :selectNum="1" :goodsIdStr="goodsIdStr"></goodsSelect>

    <!-- 微页面选择器 -->
    <micropage-select ref="micropageModal" @confirm="chosePages"></micropage-select>

    <!-- 达人选择器 -->
    <goodsSelectManager @goodsManager="commitTalent" :selectNum=1 ref="talentModal" :goodsIdStr="talentIdStr"></goodsSelectManager>


  </div>
</template>
<script>

// 引入公共类
import { timestampToDate } from "common/js/util.js"

// 商品选择器组件
import goodsSelect from 'base/goods-select/goods-select'
// 微页面选择器组件
import MicropageSelect from 'base/micropage-select/micropage-select'
// 达人选择器
import goodsSelectManager from 'base/goodsSelectManager/goodsSelectManager'


import { uploadImage } from 'api/uploadImage'

export default {
  name: 'TalentDetail',
  props: {
    detailData: {
      
    },
  },
  data() {
    return {
      weekArray: ["一","二","三","四","五","六","日"] 
	  }
  },
  methods: {
     /*
    * 选择器
    */
    chageSel(){
      this.detailData.json[0].skip_url = "";
    },

    tapInput() {
  		if (this.detailData.json[0].skip_type == "goods") {
  			this.openGoodsSelectFn();
  		} else {
        // 打开微页面选择器
        this.$refs.micropageModal.show();
      }
    },

    // 打开商品选择器
    openGoodsSelectFn(){
        this.$refs.goodsModal.show();
    },

    // 打开达人选择器
    choseTalent() {
        this.$refs.talentModal.show();
    },

    // 选中商品回调
    commitGoodsFn(_id){
    	this.detailData.json[0].skip_url = _id;
      this.detailData.json[0].path = "app/mall/item/item?goodsId="+_id;
    }, 

    // 选中微页面回调
    chosePages(ids) {
        this.detailData.json[0].skip_url = ids[0];
        this.detailData.json[0].path = "app/mall/label/label?labelId="+ids[0];
    }, 

    // 选中达人回调
    commitTalent(arr) {
      this.detailData.json[0].talentId.author_name = arr[0].author_name;
      this.detailData.json[0].talentId.author_portrait = arr[0].author_portrait;
      this.detailData.json[0].talentId.author_tag = arr[0].author_tag;
    },

    handleFileChange (event) {
      var that = this;
      uploadImage(event.target.files[0]).then(imgUrl => {
          that.detailData.json[0].image_url = imgUrl;
      }).catch(err => {
          that.$Message.error(err);  
      })  
    },

  },

  computed: {
  	createtime: function() {
  		return timestampToDate(this.detailData.json[0].time,1);
  	},
    goodsIdStr: function() {
       return this.detailData.json[0].skip_url;
    },
    talentIdStr: function() {
      return this.detailData.json[0].talentId.author_name;
    }
 
  },

  components: {
  	goodsSelect,MicropageSelect,goodsSelectManager
  }
}

</script>

<style scoped>
@import url("../baseModule.less");

.item-content {
	padding: 16px;
  overflow-y: auto;
}

.content-edit {
	flex: 1;
	padding: 16px 16px 16px 24px;
	padding-top: 0;
}
.img-wrapper {
	width: 82px;
    height: 82px;
    padding: 5px;
    border: 1px solid #f2f2f2;
}
.content-item {
	padding: 16px 0;
    border-top: 1px solid #f2f2f2;

}
.form-wrapper {
    margin: 0 16px 0 12px;
    flex: 1;
}

/*上传图片控件*/
.input-file-wrapper {
	width: 150px;
	height: 180px;
	position: relative;

  border-top-right-radius: 10px;
  overflow: hidden;
}
.input-file-wrapper img {
	width: 100%;
	height: 100%;
}
.input-file-wrapper input {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0; top: 0;
	opacity: 0;
}
.icon-wrapper {
	min-width: 50px;
    width: 50px;
    height: 50px;
    background: #f2f2f2;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
	justify-content: center;
}

select {
    height: 34px;
    width: 80px;
    margin-right: 8px;
    padding-left: 6px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

</style>
